<template>
  <el-form ref="queryForm" :inline="true" :model="queryModel">
    <!--  -->
    <template v-for="(item, index) in form" :key="index">
      <FormItem :item="item" v-bind="item" v-model="queryModel[item.model]" />
    </template>

    <el-form-item>
      <el-button type="primary" @click="handleQuery">查询</el-button>

      <el-button @click="handleReset">重置</el-button>
    </el-form-item>
  </el-form>
</template>

<script lang="js">
import { reactive } from "@vue/reactivity";
/**
 * form =[
 *  typ:"input"
 *  model:"userId"
 *  label:"用户ID"
 *  placeholder="请输入用户ID"
 * ]
 */

import FormItem from "./FormItem.vue";
import { getCurrentInstance } from "@vue/runtime-core";
export default {
  name: "QueryForm",
  props: ["modelValue", "form"],
  // 事件
  emits: ["update:modelValue", "handleQuery"],

  components: { FormItem },
  setup(props, context) {
    const ctx = getCurrentInstance();
    //
    const form = props.form;
    //
    const queryModel = reactive({
      ...props.modelValue,
    });
    //
    const handleReset = () => {
      ctx.refs.queryForm.resetFields();
    };
    //
    const handleQuery = () => {
      // todo
      context.emit("update:modelValue", { ...queryModel });
      // console.log(form);
      context.emit("handleQuery", { ...queryModel });
    };

    //
    return {
      queryModel,
      handleReset,
      handleQuery,
    };
  },
};
</script>

<style>
</style>